<template>
  <div class="app-container">
    <div class="chart-container">
      <!-- 班级互动对比图 -->
      <el-card class="chart-card">
        <div slot="header">
          <span>智慧课堂与普通课堂互动对比</span>
        </div>
        <div id="interaction-comparison" style="width: 100%; height: 400px;"></div>
      </el-card>

      <!-- 学科互动分布图 -->
      <el-card class="chart-card">
        <div slot="header">
          <span>各学科课堂互动分布</span>
        </div>
        <div id="subject-interaction" style="width: 100%; height: 400px;"></div>
      </el-card>

      <!-- 互动类型分析图 -->
      <el-card class="chart-card">
        <div slot="header">
          <span>互动类型分析</span>
        </div>
        <div id="interaction-type" style="width: 100%; height: 400px;"></div>
      </el-card>

      <!-- 成绩提升分析图 -->
      <el-card class="chart-card">
        <div slot="header">
          <span>互动参与度与成绩提升关系</span>
        </div>
        <div id="score-improvement" style="width: 100%; height: 400px;"></div>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
// import learningProcessData from '@/mock/learning-process'
// import shuxueData from '../class-overview/shuxue'

export default {
  name: 'InteractionAnalysis',
  data() {
    return {
      // 智慧课堂班级
      smartClasses: ['初二(1)班', '初二(2)班', '初二(3)班'],
      // 普通课堂班级
      normalClasses: ['初二(4)班', '初二(5)班', '初二(6)班'],
      // 互动类型
      interactionTypes: ['点名', '授权', '快速问答', '红花奖励', '分组讨论', '课堂笔记', '举手', '随堂测试'],
      // 学科
      subjects: ['语文', '数学', '英语', '物理']
    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      this.drawInteractionComparison()
      this.drawSubjectInteraction()
      this.drawInteractionType()
      this.drawScoreImprovement()
    },
    // 绘制班级互动对比图
    drawInteractionComparison() {
      const chart = echarts.init(document.getElementById('interaction-comparison'))
      const option = {
        title: {
          text: '智慧课堂与普通课堂互动对比',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['智慧课堂', '普通课堂'],
          top: 30
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['互动总次数', '点名次数', '快速问答', '随堂作业', '授权次数']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '智慧课堂',
            type: 'bar',
            data: [320, 120, 150, 200, 180],
            itemStyle: {
              color: '#409EFF'
            }
          },
          {
            name: '普通课堂',
            type: 'bar',
            data: [180, 80, 90, 120, 100],
            itemStyle: {
              color: '#909399'
            }
          }
        ]
      }
      chart.setOption(option)
    },
    // 绘制学科互动分布图
    drawSubjectInteraction() {
      const chart = echarts.init(document.getElementById('subject-interaction'))
      const option = {
        title: {
          text: '各学科课堂互动分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: this.interactionTypes
        },
        series: [
          {
            name: '互动分布',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 235, name: '点名' },
              { value: 274, name: '授权' },
              { value: 310, name: '快速问答' },
              { value: 335, name: '红花奖励' },
              { value: 400, name: '分组讨论' },
              { value: 400, name: '课堂笔记' },
              { value: 400, name: '举手' },
              { value: 400, name: '随堂测试' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      chart.setOption(option)
    },
    // 绘制互动类型分析图
    drawInteractionType() {
      const chart = echarts.init(document.getElementById('interaction-type'))
      const option = {
        title: {
          text: '互动类型分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['参与人数', '平均时长'],
          top: 30
        },
        xAxis: [
          {
            type: 'category',
            data: this.interactionTypes,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '参与人数',
            min: 0,
            max: 50,
            interval: 10
          },
          {
            type: 'value',
            name: '平均时长(分钟)',
            min: 0,
            max: 20,
            interval: 5
          }
        ],
        series: [
          {
            name: '参与人数',
            type: 'bar',
            data: [35, 42, 38, 45, 40, 48, 36, 44]
          },
          {
            name: '平均时长',
            type: 'line',
            yAxisIndex: 1,
            data: [5, 8, 6, 7, 10, 12, 4, 9]
          }
        ]
      }
      chart.setOption(option)
    },
    // 绘制成绩提升分析图
    drawScoreImprovement() {
      const chart = echarts.init(document.getElementById('score-improvement'))
      const option = {
        title: {
          text: '互动参与度与成绩提升关系',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['智慧课堂', '普通课堂'],
          top: 30
        },
        xAxis: {
          type: 'category',
          data: ['低参与度', '中参与度', '高参与度']
        },
        yAxis: {
          type: 'value',
          name: '成绩提升(分)'
        },
        series: [
          {
            name: '智慧课堂',
            type: 'line',
            data: [5, 8, 12],
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            }
          },
          {
            name: '普通课堂',
            type: 'line',
            data: [3, 5, 7],
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            }
          }
        ]
      }
      chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.chart-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.chart-card {
  margin-bottom: 20px;
}

@media screen and (max-width: 1200px) {
  .chart-container {
    grid-template-columns: 1fr;
  }
}
</style>
